﻿@page "/position"
@inject IModalDialogService ModalDialog

<h1>Positioning the modal</h1>

<hr class="mb-5" />

<p>
    The modal is shown in the center of the viewport by default. The modal can be shown
    in different positions if needed. The positioning is flexible as it is set using
    CSS styling.
</p>

<button @onclick="@(() => PositionCustom("liquid-modal-dialog-topleft"))" class="btn btn-secondary">Top left</button>
<button @onclick="@(() => PositionCustom("liquid-modal-dialog-topright"))" class="btn btn-secondary">Top right</button>
<button @onclick="PositionCenter" class="btn btn-primary">Center</button>
<button @onclick="@(() => PositionCustom("liquid-modal-dialog-bottomleft"))" class="btn btn-secondary">Bottom left</button>
<button @onclick="@(() => PositionCustom("liquid-modal-dialog-bottomright"))" class="btn btn-secondary">Bottom right</button>

@code {

    void PositionCenter()
    {
        var parameters = new ModalDialogParameters();
        parameters.Add("FormId", 11);

        ModalDialog.ShowDialogAsync<SignUpForm>("Sign Up Form", null, parameters);
    }

    void PositionCustom(string position)
    {
        var parameters = new ModalDialogParameters();
        parameters.Add("FormId", 11);
        var options = new ModalDialogOptions() { Position = position };

        ModalDialog.ShowDialogAsync<SignUpForm>("Sign Up Form", options, parameters);
    }
}

